import { ref } from 'vue';

export function dealMaskStyle() {
    const maskList = document.getElementsByClassName('ant-modal-mask') as HTMLCollectionOf<HTMLElement>;
    let visibleMasks = Array.from(maskList).filter((item) => item.style.display !== 'none');
    if (visibleMasks.length > 1) {
        for (let i = 1; i < visibleMasks.length; i++) {
            visibleMasks[i].classList.add('no-mask');
        }
    }
}

export function useDialog({ title } = {}) {
    const visible = ref(false);

    function openDialog() {
        visible.value = true;
        dealMaskStyle();
    }

    function closeDialog() {
        visible.value = false;
    }

    return {
        visible,
        title,
        openDialog,
        closeDialog,
    };
}
